<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <button>提交</button>
</form>
<!--  导入axios类库  -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        说明：
            1.后台地址url："http://localhost:8080/registerServlet"
            2.后台需要根据key即参数名是username来获取前端提交的用户名数据
            3.后台已经存在的用户名是："岩岩"
     */
    document.getElementById("username").onblur=function(){
        let usernameValue =  document.getElementById("username").value;
        axios.post("http://localhost:8080/registerServlet","username="+usernameValue)
             .then(resp=>{
                if(resp.data){
                    document.getElementById("usernameSpan").innerHTML="√恭喜,该用户可以注册!"
                    document.getElementById("usernameSpan").style.color="green";
                }else{
                  document.getElementById("usernameSpan").innerHTML="亲，对不起，用户名已经存在，不可以注册!"
                  document.getElementById("usernameSpan").style.color="red";  
                }
             })
    }
</script>
</body>

</html>